<template>
  <div class="filrate">
    <div :style="'height:'+wih+'px'"  v-if="flag" class="suo animate__animated">
      <Ordersort />
      <Shai />
      <Search />
      <div class="dingwei">
        <Ordersize />
      </div>
    </div>
    <div class="button1">
      <el-button size="mini" type="success" icon="el-icon-top" @click="shou"
        >{{anniu}}</el-button>
      <el-button size="mini" type="warning" icon="el-icon-refresh-right" native-type="reset" >重置</el-button>
      <el-button size="mini" type="primary" icon="el-icon-search" @click="searchIndent" >查询</el-button>
    </div>
  </div>
</template>

<script>
import Ordersort from "./ordersort.vue";
import Search from "./search.vue";
import Shai from "./shai.vue";
import Ordersize from "./ordersize";
export default {
  data() {
    return {
      flag: true,
      wih:170,
      anniu:'收起'
    };
  },
  components: { Ordersort, Shai, Search, Ordersize },
  methods: {
    shou() {
      
        this.wih = this.wih == '0' ? '170': '0'
        this.anniu = this.anniu=='收起' ? '展开':'收起'
    },
    searchIndent() {
      console.log(this.date);
    },
  },
  computed:{

  }
};
</script>

<style lang="scss" scoped>
.filrate {
  width: 81.5vw;
  border-radius: 5px;
  margin: 0 auto;
  border: 1px solid #fff;
  box-shadow: #999 0px 0px 20px;
  margin-bottom: 40px;
  text-align: left;
  padding: 15px;
  position: relative;
  .suo {
    position: relative;
    transition: 1s;
    overflow: hidden;
  }
  .dingwei {
    position: absolute;
    top: 15%;
    left: 50%;
  }
  .button1 {
    margin: 10px 0 0 15px;
    .el-button--primary {
      background: #213dc0;
    }
    .el-button--success {
      background: rgb(51, 51, 51);
    }
  }
}
</style>